<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Container.CmdContainerCreate")
    doImport("org.voovan.docker.command.Container.CmdContainerList")
    doImport("org.voovan.docker.command.Container.CmdContainerStart")
    doImport("org.voovan.docker.command.Container.CmdContainerStop")
    doImport("org.voovan.docker.command.Container.CmdContainerRemove")
    doImport("org.voovan.docker.command.Container.CmdContainerPause")
    doImport("org.voovan.docker.command.Container.CmdContainerUnPause")
    doImport("org.voovan.docker.command.Container.CmdContainerUnPause")


    doImport("org.voovan.docker.command.Image.CmdImageList")
    doImport("org.voovan.docker.command.Network.CmdNetworkList")
    doImport("org.voovan.docker.command.Volume.CmdVolumeList")

    function init() {
        containerListVue = new Vue({
            el: '#ContainerApp',
            data: {
                containerList: null,
                networkList: null,
                volumeList: null,
                imageList: null,
                viewContainerId : null,
                queryParams:{
                    name:"",
                    id:"",
                    status:"All"
                },
                createParams:{
                    name:"",
                    image:"",
                    command:"",
                    env:"",
                    privileged:false,
                    cpu:1,
                    memory:64,
                    network:"",
                    port: {
                        hostPort: "",
                        containerPort: "",
                        protocol: "tcp",
                        ports:[],
                        add: function(){
                            var port = {};
                            port.hostPort = this.hostPort;
                            port.containerPort = this.containerPort;
                            port.protocol = this.protocol;
                            this.ports.push(port);
                        },
                        remove: function(index){
                            this.ports.remove(index)
                        }
                    },
                    volume:{
                        volumeSource:"",
                        volumeTarget:"",
                        volumes:[],
                        add: function(){
                            var volume = {};
                            volume.volumeSource = this.volumeSource;
                            volume.volumeTarget = this.volumeTarget;
                            this.volumes.push(volume);
                        },
                        remove: function(index){
                            this.volumes.remove(index)
                        }
                    },
                    link: {
                        linkContainer: "",
                        linkName: "",
                        links:[],
                        add: function(){
                            var link = {};
                            link.linkContainer = this.linkContainer;
                            link.linkName = this.linkName;
                            this.links.push(link);
                        },
                        remove: function(index){
                            this.links.remove(index)
                        }
                    }
                }
            },
            methods: {
                //查询方法
                query: function () {
                    try {
                        var cmdContainerList = new CmdContainerList();
                        cmdContainerList.connect();
                        cmdContainerList.all(true)

                        if (this.queryParams.name != "") {
                            cmdContainerList.name([this.queryParams.name]);
                        }

                        if (this.queryParams.id != "") {
                            cmdContainerList.id([this.queryParams.id]);
                        }

                        if (this.queryParams.status != "All") {
                            cmdContainerList.status("[" + this.queryParams.status + "]");
                        }

                        //cmdContainerList.label("author","helyho");
                        this.containerList = cmdContainerList.send().sortBy("id", true);
                        cmdContainerList.close();
                        cmdContainerList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },

                //启动方法
                start: function (container) {
                    try {
                        if (container.state == "paused") {
                            var cmdContainerUnPause = new CmdContainerUnPause(container.id);
                            cmdContainerUnPause.connect();
                            cmdContainerUnPause.send();
                            cmdContainerUnPause.close();
                            cmdContainerUnPause.release();
                        } else {
                            var cmdContainerStart = new CmdContainerStart(container.id);
                            cmdContainerStart.connect();
                            cmdContainerStart.send()
                            cmdContainerStart.close();
                            cmdContainerStart.release()
                        }
                        this.query()
                    } catch (e) {
                        alertError(e)
                    }
                },

                //停止方法
                stop: function (container) {
                    try {
                        var cmdContainerStop = new CmdContainerStop(container.id);
                        cmdContainerStop.connect();
                        cmdContainerStop.waitForKill(3);
                        cmdContainerStop.send();
                        cmdContainerStop.close();
                        cmdContainerStop.release();
                    } catch (e) {
                        alertError(e)
                    }
                    this.query()
                },

                //移除方法
                remove: function (container) {
                    try{
                        name = container.names[0]
                        id = container.id

                        UIkit.modal.confirm("Are you sure to remove <span class='uk-text-danger'>" + delFirestChar(name) + "</span> ?", function () {
                            try {
                                var cmdContainerRemove = new CmdContainerRemove(id);
                                cmdContainerRemove.connect();
                                cmdContainerRemove.send();
                                cmdContainerRemove.close();
                                cmdContainerRemove.release();
                                containerListVue.query();
                            } catch (e) {
                                alertError(e)
                            }
                        });
                    } catch (e) {
                        alertError(e)
                    }
                },

                //暂停和恢复方法
                pause: function (container) {
                    try {
                        var cmdContainerPause = new CmdContainerPause(container.id);
                        cmdContainerPause.connect();
                        cmdContainerPause.send();
                        cmdContainerPause.close();
                        cmdContainerPause.release();
                    } catch (e) {
                        alertError(e)
                    }
                    this.query()
                },

                //为创建容器准备参数
                getImageList: function () {
                    try{
                        var cmdImageList = new CmdImageList();
                        cmdImageList.connect();
                        this.imageList = cmdImageList.send().sortBy("Created");
                        cmdImageList.close();
                        cmdImageList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getNetworkList: function () {
                    try{
                        var cmdNetworkList = new CmdNetworkList();
                        cmdNetworkList.connect();
                        //cmdNetworkList.type("custom");
                        this.networkList = cmdNetworkList.send().sortBy("name");
                        cmdNetworkList.close();
                        cmdNetworkList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getVolumeList: function () {
                    try{
                        var cmdVolumeList = new CmdVolumeList();
                        cmdVolumeList.connect()
                        this.volumeList = cmdVolumeList.send().sortBy("name");
                        cmdVolumeList.close();
                        cmdVolumeList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },

                //打开创建容器对话框
                openCreateDialog: function () {
                    try{
                        containerListVue.getImageList();
                        containerListVue.getNetworkList();
                        containerListVue.getVolumeList();
                    } catch (e) {
                        alertError(e)
                    }
                    createContainerDialog = UIkit.modal("#createContainerDialog");
                    createContainerDialog.show();
                },

                //创建容器
                create: function () {
                    try {
                        cmdContainerCreate = new CmdContainerCreate(this.createParams.name);
                        cmdContainerCreate.connect();

                        if (this.createParams.image != "") {
                            cmdContainerCreate.image(this.createParams.image);
                        }

                        if (this.createParams.command != "") {
                            cmdContainerCreate.cmd(this.createParams.command.split(" "));
                        }

                        if (this.createParams.env != "") {
                            cmdContainerCreate.env(this.createParams.env.split(","));
                        }

                        if (this.createParams.privileged != "") {
                            cmdContainerCreate.privileged(this.createParams.privileged);
                        }

                        if (this.createParams.cpu != "") {
                            cmdContainerCreate.cpu(this.createParams.cpu);
                        }

                        if (this.createParams.memory != "") {
                            cmdContainerCreate.memory(this.createParams.memory);
                        }

                        if (this.createParams.network != "") {
                            cmdContainerCreate.network(this.createParams.network);
                        }

                        if (this.createParams.port.ports.length > 0) {
                            for(var i = 0; i<this.createParams.port.ports.length; i++) {
                                var port = this.createParams.port.ports[i];
                                cmdContainerCreate.exposePort(port.protocol, port.containerPort, [port.hostPort]);
                            }
                        }
                        if (this.createParams.volume.volumes.length >= 0) {
                            var volumes = new Array();
                            for(var i = 0; i<this.createParams.volume.volumes.length; i++) {
                                var volume = this.createParams.volume.volumes[i];
                                var volumeStr = "";
                                if (volume.linkName != "") {
                                    volumeStr= volume.volumeSource + ":/" + volume.volumeTarget;
                                } else {
                                    volumeStr= volume.volumeSource + ":/" + volume.volumeSource;
                                }
                                volumes.push(volumeStr)
                            }
                            cmdContainerCreate.bind(volumes);
                        }

                        if (this.createParams.link.links.length > 0) {
                            var links = new Array();
                            for(var i = 0; i<this.createParams.link.links.length; i++) {
                                var link = this.createParams.link.links[i];
                                var linkStr = "";
                                if (link.linkName != "") {
                                    linkStr= link.linkContainer + ":" + link.linkName;
                                } else {
                                    linkStr= link.linkContainer + ":" + link.linkContainer;
                                }
                                links.push(linkStr)
                            }
                            cmdContainerCreate.link(links);
                        }
                        cmdContainerCreate.send();
                        cmdContainerCreate.close();
                        cmdContainerCreate.release();
                        createContainerDialog.hide();
                        alert("Create container success.");
                        containerListVue.query();
                    } catch (e) {
                        alertError(e);
                    }
                },
                //查看容器
                view: function (container) {
                    this.viewContainerId = container.id;
                    window.open("viewer.html?id="+container.id);
                }
            }
        });
        var urlId = getQueryString("id");
        containerListVue.queryParams.id = urlId==null?"" : urlId;
        if(urlId != null){
            $("#query").hide();
        }
        containerListVue.query()
    }
</script>
<body onload="init()" class="frameBody">
<div id="ContainerApp" class="uk-grid" style="display: none" v-show="this.containerList!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3 class="uk-text-middle">Container manager</h3>
        <div id="query" class="uk-panel uk-panel-box uk-text-bold">
            <div class="uk-grid">
                <div class="uk-width-5-6 uk-form">
                    <span class="mr5">Id:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="container  id" v-model="queryParams.id">
                    <span class="mr5">Name:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="container name" v-model="queryParams.name">
                    <span class="mr5">Status:</span>
                    <select v-model="queryParams.status">
                        <option value="All">All</option>
                        <option value="created">created</option>
                        <option value="restarting">restarting</option>
                        <option value="running">running</option>
                        <option value="paused">paused</option>
                        <option value="exited">exited</option>
                        <option value="dead">dead</option>
                    </select>
                    <a class="uk-button uk-button-small" @click="query()"><i class="uk-icon-search"></i></a>
                </div>
                <div class="uk-width-1-6 uk-text-right">
                    <a class="uk-button uk-button-small uk-button-primary"
                       @click="openCreateDialog"><i class="uk-icon-plus-square"></i> </a>
                </div>
            </div>
        </div>
        <table id="containerList" class="uk-table uk-overflow-container uk-panel-box">
            <caption>Container list</caption>
            <thead>
            <tr>
                <th class="uk-text-center">NO.</th>
                <th>Name</th>
                <th>Image</th>
                <th>Network & IP</th>
                <th>Export Port</th>
                <th class="uk-text-center">Status</th>
                <th class="uk-text-center">Operation</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(container,index) in containerList">
                <td class="uk-text-center uk-text-middle uk-text-small">{{index}}</td>
                <td class="uk-text-bold uk-text-middle uk-text-primary">
                    <span v-if="container.labels['com.docker.swarm.task']==''"
                          class="icon uk-icon-gears uk-text-danger" title="Swarm container"></span>
                    <span v-if="container.labels['com.docker.swarm.task']==undefined"
                          class="icon uk-icon-desktop uk-text-success" title="Stander container"></span>
                     {{container.names[0]|delFirestChar|shortDockerId(18)}}
                </td>
                <td class="uk-text-middle uk-text-warning uk-text-bold">{{container.image | shortDockerId(12)}}</td>
                <td class="uk-text-middle">
                    <div v-for="(network,networkName) in container.networkSettings.networks">
                        <code>
                            <a :href="'network.html?id='+network.networkID">{{networkName}}{{network.ipAddress==""?"":":"}}{{network.ipAddress}}</a>
                        </code>
                    </div>
                </td>
                <td class="uk-text-middle">
                    <div v-for="port in container.ports">
                        <code>{{port.type}}/{{port.privatePort}}:{{port.publicPort}}</code>
                    </div>
                </td>
                <td :class="container.state" class="uk-text-center uk-text-bold uk-text-middle">
                    {{container.state.toUpperCase()}}
                </td>
                <td class="uk-text-center uk-text-middle">
                    <div class="uk-button-group">
                        <input class="uk-button uk-button-small " type="button" value="View" @click="view(container)"/>
                        <input class="uk-button uk-button-small uk-button-primary" type="button" value="Start"
                               :disabled="container.state=='running'" @click="start(container)"/>
                        <input class="uk-button uk-button-small uk-button-success" type="button" value="Stop"
                               :disabled="container.state!='running'" @click="stop(container)"/>
                        <input class="uk-button uk-button-small" type="button" value="Pause"
                               :disabled="container.state=='paused' || container.state!='running' "
                               @click="pause(container)"/>
                        <input class="uk-button uk-button-small uk-button-danger" type="button" value="Remove"
                               @click="remove(container)"/>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="createContainerDialog" class="uk-modal">
        <div class="uk-modal-dialog uk-modal-dialog-large uk-overflow-container">
            <a href="#" class="uk-modal-close uk-close uk-close-alt"></a>
            <div class="uk-modal-header"><h2 class="uk-text-success">Create a new container</h2></div>
            <div class="uk-form">
                <table class="uk-table uk-overflow-container uk-panel-box">
                    <tr>
                        <td class="dialogField">Name:</td>
                        <td><input class="uk-form-width-medium" type="text"
                                   placeholder="contianer name" v-model="createParams.name"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Image:</td>
                        <td>
                            <select class="uk-form-width-medium" v-model="createParams.image">
                                <option v-for="image in imageList"
                                        :value="image.id|shortDockerId(12)"
                                v-if="image.repoTags.length!=0">{{image.repoTags[0]}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Command:</td>
                        <td><input class="uk-form-width-large" type="text"
                                   placeholder="command to run" v-model="createParams.command"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Env:</td>
                        <td><input class="uk-form-width-large" type="text"
                                   placeholder="like: author=dockerfly" v-model="createParams.env"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Privileged:</td>
                        <td><input class="uk-form-width-large" type="checkbox"
                                   placeholder="privileged" v-model="createParams.privileged"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">CPU:</td>
                        <td><input type="text" class="uk-form-width-small uk-text-center"
                                   placeholder="cpu core count" v-model="createParams.cpu"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Memory:</td>
                        <td><input type="text" class="uk-form-width-small uk-text-center"
                                   placeholder="memory size (Mb)" v-model="createParams.memory"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Network:</td>
                        <td>
                            <select class="uk-form-width-medium" v-model="createParams.network">
                                <option value="">Nothing</option>
                                <option v-for="network in networkList" v-if="network.driver!='overlay'"
                                        :value="network.id|shortDockerId(12)">{{network.name}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Port:</td>
                        <td>
                            <div class="uk-panel  uk-width-7-10">
                                <ul class="uk-list uk-list-line ">
                                    <li v-for="(port,index) in createParams.port.ports">
                                        <div class="uk-grid">
                                            <div class="uk-text-bold uk-text- uk-width-8-10">
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.hostPort"/>
                                                &nbsp;:&nbsp;
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.containerPort"/>
                                                &nbsp;/&nbsp;
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.protocol"/>
                                            </div>
                                            <div class="uk-width-2-10">
                                                <a href="#" class="uk-button uk-button-mini uk-button-danger" @click="createParams.port.remove(index)">
                                                    <span class="uk-icon-remove"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <input class="port_input_button uk-text-center"
                                               id="hostPort" type="text" placeholder="host" v-model="createParams.port.hostPort"/>
                                        &nbsp;:&nbsp;
                                        <input class="port_input_button uk-text-center"
                                               id="containerPort" type="text" placeholder="guest" v-model="createParams.port.containerPort"/>
                                        &nbsp;/&nbsp;
                                        <select v-model="createParams.port.protocol">
                                            <option value="tcp">tcp</option>
                                            <option value="udp">udp</option>
                                        </select>
                                        <a href="#" class="uk-button uk-button-primary" @click="createParams.port.add()"><i class="uk-icon-plus-square"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Volume:</td>
                        <td>
                            <div class="uk-panel  uk-width-7-10">
                                <ul class="uk-list uk-list-line ">
                                    <li v-for="(volume,index) in createParams.volume.volumes">
                                        <div class="uk-grid">
                                            <div class="uk-text-bold uk-text- uk-width-8-10">
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="volume.volumeSource"/>
                                                &nbsp;:&nbsp;
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="volume.volumeTarget"/>
                                            </div>
                                            <div class="uk-width-2-10">
                                                <a href="#" class="uk-button uk-button-mini uk-button-danger" @click="createParams.volume.remove(index)">
                                                    <span class="uk-icon-remove"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <select class="uk-form-width-medium" v-model="createParams.volume.volumeSource">
                                            <option value="">Nothing</option>
                                            <option v-for="volume in volumeList"
                                                    :value="volume.name">{{volume.name}}
                                            </option>
                                        </select>&nbsp;:&nbsp;
                                        <input class="uk-form-width-medium uk-text-center" type="text"
                                               placeholder="path in container" v-model="createParams.volume.volumeTarget"/>
                                        <a href="#" class="uk-button uk-button-primary" @click="createParams.volume.add()"><i class="uk-icon-plus-square"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Link:</td>
                        <td>
                            <div class="uk-panel  uk-width-7-10">
                                <ul class="uk-list uk-list-line ">
                                    <li v-for="(link,index) in createParams.link.links">
                                        <div class="uk-grid">
                                            <div class="uk-text-bold uk-text- uk-width-8-10">
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="link.linkContainer"/>
                                                &nbsp;:&nbsp;
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="link.linkName"/>
                                            </div>
                                            <div class="uk-width-2-10">
                                                <a href="#" class="uk-button uk-button-mini uk-button-danger" @click="createParams.link.remove(index)">
                                                    <span class="uk-icon-remove"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <select class="uk-form-width-medium" v-model="createParams.link.linkContainer">
                                            <option value="">Nothing</option>
                                            <option v-for="container in containerList"
                                                    :value="container.id | shortDockerId(12)">
                                                {{container.names[0]|delFirestChar|shortDockerId(18)}}
                                            </option>
                                        </select>
                                        :
                                        <input type="text" placeholder="name in contianer"
                                                v-model="createParams.link.linkName"/>
                                        <a href="#" class="uk-button uk-button-primary" @click="createParams.link.add()"><i class="uk-icon-plus-square"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="dialogField" colspan="2">
                            <a href="#"  class="uk-button uk-button-primary" @click="create()">Create</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px; margin-bottom:10px" class="uk-text-center">
            <div><img height="27" width="120" src="img/logo.png"/></div>
            <div>CopyRight <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
        </div>
    </div>
</div>

</body>
</html>